<template>
  <div id="gameDetail">
       <mt-header fixed title="掌游宝" class="ghead head">
         <div slot="left">
           <mt-button style="margin-left:15%;"  id="goBack" @click="goBack" >
           <
         </mt-button>
         </div>
       </mt-header>

       <div id="switchBtn">
         <span v-bind:class="{'active':is.detail}" @click="change('detail')">详情</span>
         <span v-bind:class="{'active':is.comments}" @click="change('comments')">评论</span>
       </div>

       <div id="gHead">
        <div class="pic"><img :src="getSrc()"></div>
        <div class="name">
          <div class="title">{{game.gameName}}</div>
          <div class="co">{{game.gameCo}}</div>    
          <div class="grade">*****</div>
          <div class="gDown">下载</div>
        </div>
       </div>
      <div id="gPics">
         <p>游戏截图</p>
         <div class="pics">
           <div><img :src="getPics('1')"></div>
           <div><img :src="getPics('2')"></div>
           <div><img :src="getPics('3')"></div>
         </div>
       </div>
        <router-view></router-view> 
  </div>
</template>
<script>
  export default {
  name: 'app',
  data () {
    return {
      game:{},
      is:{detail:true,comments:false},
      rPath:{detail:'gDetail1',comments:'gDetail2'}
    }
  },
 
  methods: {
    getSrc(){
      return this.game.gPic;
    },
    getPics(i){
      return this.game["showPic"+i]
    },
            goBack(){
                console.log(123);
                //this.$store.commit("changeStyle",1);
                this.$router.push('/gDL');
            },
            change(now){
              this.is.detail=false;
              this.is.comments=false;
              this.is[now]=true;
              this.$router.push('/gameDetail/'+this.rPath[now])
            }     
        },
        mounted(){
          this.game=this.$store.state.game[this.$store.state.gameId];
          console.log(this.game.gameName);
        }
}
</script>

<style>
.ghead{

  background-color: #2c46a5
}
.goBack1 {
  margin-left: 10%;
  color:black;

}
#gameDetail{
  background-color: #e5e8eb;
}
#switchBtn{
  padding-top: 14%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 12%
}
#switchBtn span{
  font-size: 350%;
  margin-left: 0.5%;
  border:2px solid #2c46a5;
  padding: 1%;
}
.active{
  background-color: #2c46a5;
  color: #ccc
}
#gHead{
  width:100%;
  height: 100%
}
#gHead .name{
  width:60%
}
#gHead div{
  float: left;
}
#gHead .pic{
  height: 250px;
  width: 25%;
  background-color: blue;
  margin-left: 5%;
  border-radius: 50px;
  overflow: hidden;
}
#gHead .title{
  font-size: 400%;
  width: 100%;
  text-align: left;
  margin-left: 10%;
}
#gHead .co{
  font-size: 250%;
  width: 100%;
  text-align: left;
  margin-left: 10%;
}
#gHead .grade{
  font-size:300%;
  margin-left: 10%;
  width: 70%;
  text-align: left;
}
#gHead .gDown{
  font-size: 300%;
  border:2px solid blue;
}
#gPics{
  border-top:2px blue solid;
   border-bottom:2px blue solid;
   height: 550px;
   margin-top: 30%;
}
#gPics p{
  font-size: 350%;
  text-align: left;
  margin-left: 5%;
  margin-top: 3%
}
#gPics .pics div{
  height:400px;
  width:30%;
  background-color: blue;
  float: left;
  margin-left: 2%;
  margin-top: 1%
}
#gDescribe{
  border-bottom:2px blue solid;
   height: 400px;
   margin-top: 3%
}
#gDescribe p{
  font-size: 350%;
  text-align: left;
  margin-left: 5%
}
#gDescribe .text{
  font-size: 250%;
  text-align: left;
  margin-left: 5%;
  margin-top: 3%
  }
#gInfo{
  height: 400px;
  margin-top: 3%;
  text-align: left;
}
#gInfo p{
  font-size: 350%;
  margin-left: 5%
}
#gInfo div{
}
#gInfo .t{
  margin-left: 5%;
  float: left;
  margin-top: 0%;
  font-size: 80%;
  width: 20%;
  text-align: right;
}
#gInfo .c{
  margin-left: 5%;
  float: left;
  margin-top: 0%;
  font-size: 80%;
  width: 50%;
  text-align: left;
  margin-left: 1%;
  color:gray;
}
</style>